<template>
    
  <div class="page">
    <nav class="item-list">
        <router-link class="list" v-for="item in list" :key="item.id" :to="{ name: item.id }">
            <img :src="item.pic" alt="">
      <span class="text">{{ item.title }}</span>
        </router-link>
        
    </nav>
    <!--  -->
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
    name:"operate",
    data(){
        return{
            list:[
                {
                    id:"vicinity",
                    title:"附近房源",
                    pic:"https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u292.svg"
                },
                                {
                    id:"collect",
                    title:"收藏",
                    pic:"https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u307.svg"
                },
                                {
                    id:"record",
                    title:"浏览记录",
                    pic:"https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u310.svg",
                },
                                {
                    id:"hasHandload",
                    title:"成为房东",
                    pic:"https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u313.svg",
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
@function vw($px) {
    @return ($px / 750) * 100vw;

}

.item-list{
    width: 100%;
    height: vw(140);
    display: flex;
    .list{
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        color: #000;
        img{
            width: 20%;
        }
    }
}
</style>